import React, { Component } from 'react'

export class Footer extends Component {

    handleCheckAll = (event) => {
        this.props.checkAllTodo(event.target.checked)
    }

    handleDeleteAllTodoDone = () => {
        this.props.deleteAllTodoDone()
    }
    render() {
        const {todos} = this.props
        const total = todos.length;
        const doneCount = todos.reduce((prev, todoObj) => prev + (todoObj.done ? 1 : 0), 0)
        return (
            <div>
                <input type="checkbox" onChange={this.handleCheckAll} checked={total !== 0 && total === doneCount}/>
                <span>已经完成{doneCount}/全部{todos.length}</span>
                <button className="btn btn-danger" onClick={this.handleDeleteAllTodoDone}>清除已完成任务</button>
            </div>
        )
    }
}

export default Footer
